<template>
  <!-- t弹框 -->
  <div class="add-form">
    <el-dialog
      :title="titleInfo.text + titleInfo.pageTitle"
      :visible.sync="dialogFormVisible"
      @close="dialogFormH"
    >
      <el-form
        ref="dataForm"
        :rules="ruleInline"
        :model="formBase"
        label-position="left"
        label-width="150px"
        style="width: 80%; margin-left: 10px"
      >
        <el-form-item label="企业名称" prop="shortName">
          <el-input v-model="formBase.shortName" />
          <el-checkbox
            v-model="formBase.isFamous"
            :true-label="1"
            :false-label="0"
          >是否为名企</el-checkbox>
        </el-form-item>
        <el-form-item label="所属公司" prop="company">
          <el-input v-model="formBase.company" />
          <p>https://www.tianyancha.com （在此可查询所属公司全称及简称）</p>
        </el-form-item>

        <el-form-item label="城市" prop="province">
          <el-select
            v-model="formBase.province"
            class="filter-item"
            style="width: 130px"
            filterable
            @keyup.enter="handleFilter"
            @change="handleProvince"
          >
            <el-option
              v-for="item in citySelect.province"
              :key="item"
              :label="item"
              :value="item"
            />
          </el-select>
          <el-select
            v-model="formBase.city"
            class="filter-item"
            style="width: 130px"
            filterable
            @keyup.enter="handleFilter"
          >
            <el-option
              v-for="item in citySelect.cityDate"
              :key="item"
              :label="item"
              :value="item"
            />
          </el-select>
        </el-form-item>
        <el-form-item label="方向（企业标签）" prop="tags">
          <el-input v-model="formBase.tags" />
        </el-form-item>
        <el-form-item label="备注" prop="remarks">
          <el-input
            v-model="formBase.remarks"
            type="textarea"
            :autosize="{ minRows: 2, maxRows: 4 }"
            placeholder="请输入"
          />
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogFormH">取消</el-button>
        <el-button type="primary" @click="createData">确认</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import { add, update } from '@/api/companys/companys'
import { provinces, citys } from '@/api/companys/citys'
import { detail } from '@/api/companys/companys'
const defaultItem = {
  isFamous: 0,
  shortName: '',
  company: '',
  province: '',
  city: '',
  tags: '',
  state: '',
  remarks: ''
}
export default {
  name: 'CompanysAdd',
  props: {
    titleInfo: {
      type: Object,
      required: true
    }
    // formBase: {
    //   type: Object,
    //   required: true
    // }
  },
  data() {
    return {
      dialogFormVisible: false,
      formBase: {
        ...defaultItem
      },
      // 省市信息
      citySelect: {
        province: [],
        cityDate: []
      },
      // 表单验证
      ruleInline: {
        shortName: [
          { required: true, message: '企业简称不能为空', trigger: 'blur' }
        ],
        province: [
          { required: true, message: '请选择省份', trigger: 'change' }
        ],
        tags: [{ required: true, message: '请输标签', trigger: 'blur' }],
        remarks: [{ required: true, message: '请输入备注', trigger: 'blur' }]
      }
    }
  },
  computed: {},
  // 挂载结束

  mounted: function() {},
  // 创建完毕状态
  created() {
    this.getCityData()
  },
  // 组件更新
  updated: function() {},
  methods: {
    // 表单详情数据加载
    async hanldeEditForm(id) {
      console.log(id)
      this.formBase.id = id
      const { data } = await detail(id)
      console.log(data)
      // 获取详情 给formData
      this.formBase = data
    },

    // 弹层显示
    dialogFormV() {
      this.dialogFormVisible = true
    },
    // 弹层隐藏
    dialogFormH() {
      this.dialogFormVisible = false
      this.formBase = {
        ...defaultItem
      }
    },

    // 获取省
    getCityData: function() {
      this.citySelect.province = provinces()
    },
    // 选省获取到市
    handleProvince: function(e) {
      this.citySelect.cityDate = citys(e)
      this.formBase.city = this.citySelect.cityDate[0]
    },
    // 表单提交
    createData() {
      this.$refs.dataForm.validate(async(valid) => {
        if (valid) {
          if (this.formBase.isFamous === 0) {
            this.formBase.isFamous = false
          } else if (this.formBase.isFamous === 1) {
            this.formBase.isFamous = true
          }
          const data = {
            ...this.formBase
          }
          if (this.formBase.id) {
            // 修改
            await update(data).then(() => {
              this.$emit('newDatas', data)
              //  this.$forceUpdate()
            })
          } else {
            // 添加
            await add(data).then(() => {
              this.$emit('newDatas', data)
            })
          }
          this.dialogFormH()
        } else {
          this.$message.error('*号为必填项!')
        }
      })
    }
  }
}
</script>

<style lang="scss" scoped></style>
